[3]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談CSS

DAY 1

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 1 篇

css 鐵人賽 man

blackie1019i

2013-10-02 00:42:42

2290 瀏覽

分享至

CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言，主要功能是為了提供HTML或 XHTML 在呈現上面的一個顯示層(好比超人的服裝一樣)，將透過改變CSS的屬性，我們可以讓相同的HTML元素呈現不同的風貌。
用MAN架構打造超人般的網頁應用程式系列文章
 用MAN架構打造超人般的網頁應用程式系列文章

CSS介紹

CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言，主要功能是為了提供HTML或 XHTML 在呈現上面的一個顯示層(好比超人的服裝一樣)，將透過改變CSS的屬性，我們可以讓相同的HTML元素呈現不同的風貌。

在使用上分為兩位引入方式，使用如下面格式

<meta charset="utf-8">
<title></title>
<!--1. 引入指定的css檔案-->
<link rel="stylesheet" href="index.css">
<!--2. 直接宣告CSS屬性-->
<style type="text/css">
h1{
color: red; 
}
h2{
color:green;
}
</style>


<h1>RED</h1>
<h2>GREEN</h2>

上面的的link就是把指定的css檔案加入到頁面中使用，而style則是在頁面自己宣告css屬性使用，在使用上就是透過選擇器的方式，選到指定的dom物件後作修改，而選擇的方式可以透過元素型別,id名稱,class名稱等方式來抓取。

CSS3與CSS4後面數字的差異是代表他推出的版本，各版本除了有些許屬性與功能不同外，主要各家的瀏覽器也有不同的支援程度，而這邊要介紹的CSS3目前在大部分的瀏覽器都支援了，而CSS4尚在開發中使用前要查一下支援程度，之後的系列文章也都以CSS3為主去撰寫。

CSS選擇器

在撰寫CSS上對選擇器的瞭解是一項非常重要的事情，如同上面的範例我們可以選擇到h1這個元素的過程就是一個選擇器的挑選方法，下面再介紹其他的挑選方法

<meta charset="utf-8">
<title></title>
<!--1. 引入指定的css檔案-->
<link rel="stylesheet" href="">
<!--2. 直接宣告CSS屬性-->
<style type="text/css">
/*指定h1這個元素*/
h1{
color: yellow; 
}
/*指定h2這個元素*/
h2{
color:green;
}
/*指定h1下面的p元素*/
h1 p{
color:gold; 
}
/*指定id="black"的元素*/
#black{
color:black;
}
/*指定class="blue"的元素*/
.blue{
color:blue;
}
/*指定重新指定h1這個元素*/
h1{
color: red; 
}
</style>


<h1>RED<p>gold</p></h1>
<h2>GREEN</h2>
<h1 id="black">blackie</h1>
<h2 class="blue">blue</h2>
<input class="blue" type="text" value="input..."></input>